<template>
	<view>
		<view>
			<view class="setion-title">
				<image src="../static/order/money.png" mode="widthFix"></image>
				<text>基础收费</text>
			</view>
			<view class="section-content">
				<view class="item">
					<view class="left">
						<text class="item-title">里程费（{{ realMileage }}公里）</text>
						<text class="item-desc">时段收费（{{ baseMileagePrice }}元{{ baseMileage }}公里，超出每公里{{ exceedMileagePrice }}元）</text>
					</view>
					<view class="right">{{ mileageFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">时长费（{{ waitingMinute }}分钟）</text>
						<text class="item-desc">免费{{ baseMinute }}分钟，超出部分每分钟{{ exceedMinutePrice }}元</text>
					</view>
					<view class="right">{{ waitingFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">返程费（{{ returnMileage }}公里）</text>
						<text class="item-desc">总里程超过{{ baseReturnMileage }}公里，每公里{{ exceedReturnPrice }}元</text>
					</view>
					<view class="right">{{ returnFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../static/order/money.png" mode="widthFix"></image>
				<text>额外收费</text>
			</view>
			<view class="section-content">
				<view class="item">
					<view class="left">
						<text class="item-title">停车费</text>
						<text class="item-desc">如果代驾司机预付停车费，该费用将计入订单费用</text>
					</view>
					<view class="right">{{ parkingFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">路桥费</text>
						<text class="item-desc">如果代驾司机预付停车费，该费用将计入订单费用</text>
					</view>
					<view class="right">{{ tollFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">其他费用</text>
						<text class="item-desc">代驾过程中产生的其他费用</text>
					</view>
					<view class="right">{{ otherFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../static/order/money.png" mode="widthFix"></image>
				<text>奖励费</text>
			</view>
			<view class="section-content">
				<view class="item">
					<view class="left">
						<text class="item-title">客户好处费</text>
						<text class="item-desc">代驾客户赠与的红包奖励</text>
					</view>
					<view class="right">{{ favourFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">系统奖励费</text>
						<text class="item-desc">代驾系统激励代驾司机的奖励</text>
					</view>
					<view class="right">{{ incentiveFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../static/order/money.png" mode="widthFix"></image>
				<text>总金额</text>
			</view>
			<view class="section-content">
				<view class="content-container">
					<view class="left">
						<view class="content big">
							【汇总合计】
							<text class="red">¥ {{ total }} 元</text>
						</view>
						<view class="content big">
							【代缴个税】
							<text class="red">¥ {{ taxFee }} 元</text>
						</view>
						<view class="content big">
							【实际收入】
							<text class="red">¥ {{ driverIncome }} 元</text>
						</view>
					</view>

					<image :src="img" mode="widthFix" class="img"></image>
				</view>
				<view class="desc">代缴个税和实际收入仅供参考，以乘客实际付款金额为准</view>
			</view>

			<!-- 线上还是线下支付的选项 -->
			<view class="pay_ment">
				
				<view style="display: flex;align-items: center;" @click="sysPayState(1)">
					<view class="iconfont dj-online-pay" style="font-size: 60rpx;color: #2AA7E6;" ></view>
					<text style="flex: 1; margin-left: 20rpx;margin-right: 20rpx;font-weight: bold;">客户在线支付</text>
					<view style="font-size: 48rpx;color: #3884d6;" :class="['iconfont',payState == 1 ?'dj-xuanzhong':'dj-duoxuan_weixuanzhong' ]"></view>
				</view>

				<view style="display: flex;align-items: center;margin-top: 8rpx;margin-top: 30rpx;" @click="sysPayState(2)">
					<view class="iconfont dj-xianxiazhifu" style="font-size: 60rpx;color: #5F71FA;" ></view>
					<text style="flex: 1; margin-left: 20rpx;margin-right: 20rpx;font-weight: bold;">已线下收款</text>
					<view style="font-size: 48rpx;color: #3884d6;" :class="['iconfont',payState == 2 ?'dj-xuanzhong':'dj-duoxuan_weixuanzhong']"></view>
				</view>
				
			</view>

			<button class="btn" @tap="sendOrderBill">{{ btnMsg }}</button>
			
			<!-- 吐司 -->
			<u-toast ref="uToast" />
			
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//1为线上  2为线下
			payState: 1,
			senStatus: 6,
			btnMsg: '发送账单',
			orderId: null,
			customerId: null,
			favourFee: '暂无',
			incentiveFee: '暂无',
			realMileage: '--',
			mileageFee: '暂无',
			baseMileagePrice: '',
			baseMileage: '',
			exceedMileagePrice: '',
			waitingFee: '暂无',
			baseMinute: '',
			waitingMinute: '--',
			exceedMinutePrice: '',
			returnFee: '暂无',
			baseReturnMileage: '',
			exceedReturnPrice: '',
			returnMileage: '--',
			parkingFee: '暂无',
			tollFee: '暂无',
			otherFee: '暂无',
			total: '--',
			taxFee: '--',
			driverIncome: '--'
		};
	},
	methods: {
		//同步状态的方法
		sysPayState(state) {
			switch (state) {
				case 1:
					if (this.payState != 1) {
						this.payState = 1;
						this.senStatus = 6;
						this.btnMsg = '发送账单';
					}
					break;
				case 2:
					if (this.payState != 2) {
						this.payState = 2;
						this.senStatus = 8;
						this.btnMsg = '结束订单';
					}
					break;
			}
		},

		sendOrderBill() {
			let that = this;
			let tipMsg = that.payState == 1 ? '是否发送代驾账单给客户？' : '确定立即结束订单吗？';
			uni.showModal({
				title: '提示消息',
				content: tipMsg,
				success: resp => {
					if (resp.confirm) {
						let data = {
							orderId: that.orderId,
							customerId: that.customerId,
							status: that.senStatus
						};

						//线上支付走原接口,线下支付走modifyOrderStatus
						let stateUrl = that.payState == 1 ? that.url.updateOrderStatus : that.url.modifyOrderStatus;

						that.ajax(stateUrl, 'POST', data, resp => {
							console.log(`请求的结果是:`,resp)
							if (that.payState == 1) {
								// that.workStatus = '等待付款';
								// uni.setStorageSync('workStatus', '等待付款');
								that.workStatus = '停止接单';
								uni.setStorageSync('workStatus', '停止接单');
								//页面发生跳转
								uni.navigateTo({
									url: '../waiting_payment/waiting_payment?orderId=' + that.orderId
								});
							} else {
								that.workStatus = '停止接单';
								uni.setStorageSync('workStatus', '停止接单');
								//线下付款
								that.$refs.uToast.show({
									title: '订单完成，请注意核对线下收款信息！',
									callback:() => {
										console.log('执行这个回调了')
										//跳转到工作台界面
										uni.switchTab({
											url: '../../pages/workbench/workbench'
										});
									}
								});
							}
						});
					}
				}
			});
		}
	},
	
	onLoad(options) {
		let that = this;
		that.orderId = options.orderId;
		that.customerId = options.customerId;
		let data = {
			orderId: that.orderId
		};
		that.ajax(that.url.searchReviewDriverOrderBill, 'POST', data, function(resp) {
			let result = resp.data.result;
			that.favourFee = result.favourFee;
			that.incentiveFee = result.incentiveFee;
			that.realMileage = result.realMileage;
			that.mileageFee = result.mileageFee;
			that.baseMileagePrice = result.baseMileagePrice;
			that.baseMileage = result.baseMileage;
			that.exceedMileagePrice = result.exceedMileagePrice;
			that.waitingFee = result.waitingFee;
			that.baseMinute = result.baseMinute;
			that.waitingMinute = result.waitingMinute;
			that.exceedMinutePrice = result.exceedMinutePrice;
			that.returnFee = result.returnFee;
			that.baseReturnMileage = result.baseReturnMileage;
			that.exceedReturnPrice = result.exceedReturnPrice;
			that.returnMileage = result.returnMileage;
			that.parkingFee = result.parkingFee;
			that.tollFee = result.tollFee;
			that.otherFee = result.otherFee;
			that.total = result.total;
			that.driverIncome = result.driverIncome;
			that.taxFee = result.taxFee;
		});
	},
	onShow: function() {},
	onHide: function() {}
};
</script>

<style lang="less">
@import url('order_bill.less');
</style>
